<template>
  <view class="wrap">
     <top-tab tabTitle="签到兑换现金" @backClick="backClick" backColor="#6732B8"/>
		 <view class="header-box">
			 <view class="header-integ">
					<view class="my-integral-box">
						<view class="integral">我的积分</view>
						<view class="item-num-rule">
							<view class="number">2895</view>
							<view class="rule">兑换规则</view>
						</view>
					</view>
			 </view>
			 <view class="sign-card">
				<view class="sign-integ">签到领积分</view>
				<view class="icon-box">
					<view class="iconfont" v-for="(item,index) in iconfont" :key="index">{{item}}</view>
				</view>
				<view class="today-sign">今日签到</view>
			 </view>
		 </view>
		<!-- 做任务赚积分 -->
		<view class="task-main">
			<view class="task-integ">
				<view class="integral-back">
					<image src="/static/my/integral_back.png" class="img"></image>
					<view class="title">做任务赚积分</view>
				</view>
				<view class="item-list" v-for="(item,index) in taskList" :key="item.id">
					<view class="img-text-btn">
						<view class="img-box">
							<image class="img" :src="item.url"></image>
						</view>
						<view>
							<view class="invite-register">{{item.title}}</view>
							<view class="mini-procedure">{{item.subhead}}</view>
						</view>
					</view>
					<view class="go-accom" @click="inviteFridnd">去完成</view>
				</view>
			</view>
			<!-- 轮播 -->
			<view class="add-vip-box">
				<view class="title">开通会员</view>
				<view class="purchase" @click="buyRecord">更多</view>
			</view>
			<view class="add-vip-btn-box">
				<swiper :circular="true" style="border-radius: 8px;overflow: hidden;"
				 duration="400"  previous-margin="0px" next-margin="230px">
					<swiper-item v-for="(item,index) in addVip" :key="item.id" class="swiper-add">
						<view class="item-money">
							<view class="day-vip">{{item.name}}</view>
							<view class="money">{{item.money}}<text class="unit">元</text></view>
							<view class="top-price">{{item.contunt}}</view>
							<view class="once-open" @click="addPay">立即兑换</view>
							<view class="postion-left"></view>
							<view class="postion-right"></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				addVip: [
					{ id: 1, name: "日费会员", money: 20, contunt: "￥199.00"},
					{ id: 2, name: "月费会员", money: 50, contunt: "￥199.00"},
					{ id: 3, name: "年费会员", money: 99, contunt: "￥199.00"},
					{ id: 4, name: "日费会员", money: 10, contunt: "￥199.00"},
					{ id: 5, name: "日费会员", money: 5, contunt: "￥199.00"}
				],
				taskList: [
					{ id: 1, title: '邀请好友成功注册', subhead: '登录海报小程序可+1积分', url: '/static/my/sign_a.png'},
					{ id: 2, title: '点赞、评论', subhead: '每日兑换一次现金可加+2积分', url: '/static/my/click_praise.png'},
					{ id: 3, title: '首充', subhead: '邀请好友使用，注册后可+5积分', url: '/static/my/topup.png'}
				],
				iconfont: [ "\ue605", "\ue605", "\ue605", "\ue605", "\ue605", "\ue605", "\ue605"]
			}
    },
  onShow() {},
  methods: {
		// 去完成
		inviteFridnd() {
			uni.navigateTo({
				url: '/pages/my/sign/invite_friend'
			})
		},
		// 更多-跳积分商城
		buyRecord() {
			uni.navigateTo({
				url: '/pages/my/sign/store'
			})
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			   url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.header-box{
		position: relative;
		.header-integ{
			height: 298rpx;
			background-color: #6732B8;
			border-radius: 0 0 15% 15%;
			.my-integral-box{
				padding: 0 30rpx;
				.integral{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-bottom: 30rpx;
				}
				.item-num-rule{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #FFFFFF;
					.number{
						font-size: 60rpx;
						font-family: PingFang SC;
						font-weight: 600;
					}
					.rule{
						padding: 11rpx 29rpx;
						border: 2rpx solid #FFFFFF;
						border-radius: 25rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
			}
		}
		.sign-card{
			width: 690rpx;
			height: 281rpx;
			background: #FFFFFF;
			box-shadow: 0px 10rpx 15rpx 0px rgba(99, 77, 255, 0.2);
			border-radius: 16rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -180rpx;
			margin: auto;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			.sign-integ{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				padding-left: 12rpx;
			}
			.icon-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 35rpx 0;
				.iconfont{
					color: #D9D7D8;
					font-size: 58rpx;
				}
			}
			.today-sign{
				width: 400rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #6732B8, #934CFF);
				border-radius: 27rpx;
				line-height: 54rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: auto;
				letter-spacing:2px;
			}
		}
	}
	// 做任务赚积分
	.task-main{
		padding: 0 30rpx;
		margin-top: 267rpx;
		.task-integ{
			width: 100%;
			// height: 570rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 15rpx 0px rgba(99, 77, 255, 0.2);
			border-radius: 16rpx;
			padding: 30rpx;
			.integral-back{
				width: 275rpx;
				height: 50rpx;
				margin: auto;
				position: relative;
				.img{
					width: 100%;
					height: 100%;
				}
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					text-align: center;
					line-height: 50rpx;
					letter-spacing:2px;
				}
			}
			.item-list:last-child{
				border-bottom: none !important;
				padding-bottom: 0 !important;
			}
			.item-list{
				padding: 36rpx 0;
				border-bottom: 1rpx solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.img-text-btn{
					display: flex;
					align-items: center;
					.img-box{
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
						background: #E5D5FF;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 30rpx;
						.img{
							// display: block;
							width: 42rpx;
							height: 48rpx;
						}
					}
					.invite-register{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						margin-bottom: 18rpx;
					}
					.mini-procedure{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #747980;
					}
				}
				.go-accom{
					width: 132rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #6732B8, #934CFF);
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing:2px;
				}
			}
		}
		// 轮播
		.add-vip-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 67rpx 0 44rpx 0;
				.logo-back{
					width: 4rpx;
					height: 40rpx;
					background: #B73DF0;
					border-radius: 2rpx;
				}
				.title{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			
			.purchase{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #999999;
				padding-right: 33rpx;
			}
		}
		.add-vip-btn-box{
			padding-bottom: 163rpx;
			/deep/ swiper {
				// width: 191rpx !important;
				height: 170 !important;
			}
			.swiper-add:first-child{
				.once-open{
					background: linear-gradient(90deg, #B83DF1, #852CAE) !important;
					-webkit-text-fill-color: #FFFFFF;
				}
			}
			.item-money{
				width: 191rpx;
				height: 300rpx;
				background: #FEE5C9;
				border-radius: 7rpx 7rpx 0 0;
				text-align: center;
				position: relative;
				// .once-open:nth-of-type(1){
				// 	color: #FFFFFF !important;
				// 	background: linear-gradient(90deg, #B83DF1, #852CAE) !important;
				// }
				.day-vip{
					width: 112rpx;
					height: 30rpx;
					background: #F29B76;
					border-radius: 0px 0px 7rpx 7rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
					margin: auto;
				}
				.money,.top-price{
					font-size: 83rpx;
					font-family: Arial;
					font-weight: 600;
					color: rgba(255, 255, 255, 0.78);
					opacity: 0.87;
					text-shadow: 0px 1px 1px rgba(74, 74, 74, 0.52);
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #573132 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					margin: 33rpx 0 10rpx 0;
					.unit{
						font-size: 24rpx;
					}
				}
				.top-price{
					font-size: 24rpx;
					margin:0;
					text-decoration:line-through;
					padding-bottom: 16rpx;
					// padding-bottom: 40rpx;
					border-bottom: 1rpx solid #ECAF8D;
				}
				
				.once-open{
					height: 85rpx;
					line-height: 85rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(63deg, #4907AC 0%, #A95924 0%, #542F2B 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.postion-left{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					left: -7px;
					top:68%;
				}
				.postion-right{
					width: 26rpx;
					height: 26rpx;
					background: #FFFFFF;
					border-radius: 50%;
					position: absolute;
					right: -7px;
					top:68%;
				}
			}
		}
	}
</style>
